import React, { useState, useEffect } from "react";
import { Input, Select, BatchSuffixInput } from "@/views/components/PrefixPlaceholder";
import { NumText } from "@/pages/OrderModule/common/components/CommonText";
import { Form, Button, Popconfirm, Dropdown, Menu, Image, InputNumber, DatePicker } from "antd";
import { SPU_SYNC_STATUS, SPU_OTHER_ATTR, COMB_STATUS, SPU_PRICE_TYPE } from "@/views/utils/constant";
import { DownOutlined } from "@ant-design/icons";
import moment from "moment";
import Iconfont from "@/components/IconFont";

const { RangePicker } = DatePicker;
export default ({ addGoodsClick, confirm, cancel }) => {
	const defaultColumns = [
		{
			name: "序号",
			code: "index",
			lock: true,
			render: (t, r, i) => {
				return i + 1;
			},
			width: 100
		},
		{
			name: "图片",
			code: "image",
			width: 200,
			render: (value, record, i) => <Image width={60} src={value} />,
			search: {
				order: 10,
				code: "imageType",
				content: () => (
					<Select
						allowClear
						placeholder="组合图片"
						options={[
							{
								value: "1",
								label: "有商品图片"
							},
							{
								value: "2",
								label: "无商品图片"
							}
						]}
					/>
				)
			}
		},
		{
			name: "组合编号",
			code: "skuCode",
			search: {
				order: 1,
				content: () => <Input allowClear placeholder="组合编号" />
			},

			width: 200
		},
		{
			name: "组合商品名称",
			code: "skuName",
			search: {
				order: 4,
				content: () => <Input allowClear placeholder="组合商品名称" />
			},

			width: 200
		},
		{
			name: "组合装简称",
			code: "skuAbbreviation",
			search: {
				order: 7,
				content: () => <Input allowClear placeholder="商品简称" />
			},
			width: 200
		},
		{
			name: "零售价",
			code: "retailPrice",
			render: value => value && <NumText as="s1" pre="¥" num={value} />,
			width: 200
		},
		{
			name: "采购价",
			code: "purchasePrice",
			render: value => value && <NumText as="s1" pre="¥" num={value} />,
			search: {
				order: 4,
				code: "sonName",
				content: () => <Input placeholder="商品名称" />
			},
			width: 200
		},
		{
			name: "成本价",
			code: "costPrice",
			render: value => value && <NumText as="s1" pre="¥" num={value} />,
			width: 200,
			search: {
				span: 3,
				order: 12,
				content: () => (
					<Input.Group compact style={{ display: "flex" }}>
						<Form.Item name="priceType" noStyle>
							<Select
								origin={origin}
								placeholder="选择价格"
								options={SPU_PRICE_TYPE}
								style={{
									flex: 1
								}}
							/>
						</Form.Item>
						<Form.Item name="minPrice" style={{ textAlign: "center", flex: 1, marginBottom: 0 }}>
							<InputNumber
								min={0}
								placeholder="最小值"
								style={{
									textAlign: "center",
									flex: 1
								}}
							/>
						</Form.Item>
						<Iconfont type="iconxiangyoujiaohuan" className="input-middle-icon" />
						<Form.Item name="maxPrice" style={{ textAlign: "center", flex: 1, marginBottom: 0 }}>
							<InputNumber
								min={0}
								placeholder="最大值"
								style={{
									textAlign: "center",
									flex: 1
								}}
							/>
						</Form.Item>
					</Input.Group>
				)
			}
		},
		{
			name: "市场价",
			code: "tagPrice",
			render: value => value && <NumText as="s1" pre="¥" num={value} />,
			width: 200
		},
		{
			name: "可用库存",
			code: "availableInventory",
			search: {
				order: 3,
				code: "sonCode",
				content: () => <Input allowClear placeholder="商品编码" />
			},
			width: 200
		},
		{
			name: "虚拟库存",
			code: "virtualInventory",
			width: 200,
			search: {
				order: 2,
				code: "spuCode",
				content: () => <Input allowClear placeholder="款式编码" />
			},
			render: text => <div style={{ color: "rgba(240, 61, 41, 1)" }}>{text}</div>
		},
		// {
		// 	name: "最后同步库存",
		// 	code: "syncInventory",
		// 	search: {
		// 		order: 2,
		// 		code: "spuCode",
		// 		content: () => <Input allowClear placeholder="款式编码" />
		// 	},
		// 	width: 200
		// },
		// {
		// 	name: "最后同步时间",
		// 	code: "syncTime",
		// 	search: {
		// 		order: 3,
		// 		code: "sonCode",
		// 		content: () => <Input allowClear placeholder="商品编码" />
		// 	},
		// 	width: 200
		// },
		{
			name: "组合装是否缺失",
			code: "deletionList",
			render: (value, record) =>
				record?.deletionList?.length > 0 ? (
					<div>
						{record?.deletionList?.map(item => 
                        (<span>
                            <span className="common-color9">{item.skuCode}</span>
                            <span>（{item.num}）</span>
                        </span>))}
					</div>
				): '否',
			search: {
				order: 9,
				code: "isDeletion",
				content: () => (
					<Select
						allowClear
						placeholder="组合装是否缺失"
						options={[
							{
								value: "1",
								label: "是"
							},
							{
								value: "0",
								label: "否"
							}
						]}
					/>
				)
			},
			width: 200
		},
		{
			name: "库存同步状态",
			code: "syncStatus",
			search: {
				order: 8,
				code: "isSyncInventory",
				content: () => <Select allowClear placeholder="库存同步状态" options={SPU_SYNC_STATUS} />
			},
			width: 200
		},
		{
			name: "组合装备注",
			code: "note",
			search: {
				order: 14,
				content: () => <Input allowClear placeholder="组合备注" />
			},
			width: 200
		},
		,
		{
			name: "规格数",
			code: "num",
			search: {
				order: 13,
				span: 3,
				group: [
					{
						span: 12,
						code: "attributeType",
						content: () => <Select origin allowClear placeholder="其他属性" options={SPU_OTHER_ATTR} className="width-full" />
					},
					{
						span: 12,
						code: "attribute",
						content: () => <Input origin allowClear placeholder="属性" />
					}
				]
			},
			width: 200
		},
		{
			name: "重量",
			code: "weight",
			search: {
				order: 6,
				span: 6,
				content: () => (
					<Input.Group compact style={{ display: "flex" }}>
						<Form.Item name="startWeight" style={{ textAlign: "center", flex: 1, marginBottom: 0 }}>
							<Input allowClear placeholder="重量范围" type="number" addonAfter="kg" />
						</Form.Item>
						<Iconfont type="iconxiangyoujiaohuan" className="input-middle-icon" />
						<Form.Item
							name="endWeight"
							style={{
								textAlign: "center",
								flex: 1,
								marginBottom: 0
							}}
						>
							<Input className="site-input-right" type="number" addonAfter="kg" />
						</Form.Item>

						{/* </div> */}
					</Input.Group>
				)
			},
			width: 200
		},
		{
			name: "创建时间",
			code: "createTime",
			render: text => (text ? <div>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</div> : ""),
			width: 200
		},
		{
			name: "最后修改时间",
			code: "updateTime",
			render: text => (text ? <div>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</div> : ""),
			// search: {
			// 	order: 8,
			// 	code: "status",
			// 	content: () => <Select allowClear placeholder="组合装状态" options={COMB_STATUS} />
			// },
			width: 200
		},
		{
			name: "操作",
			code: "action",
			align: "center",
			lock: true,
			render: (t, r, i) => (
				<span>
					<span className="common-color2" style={{ marginRight: "20px" }} onClick={() => addGoodsClick(1, r, "update")}>
						编辑
					</span>
					<Dropdown
						trigger="click"
						overlay={
							<Menu>
								<Menu.Item key="1" onClick={() => addGoodsClick(1, r, "copy")}>
									复制
								</Menu.Item>
								<Menu.Item key="2">
									<Popconfirm title="确定删除该条数据?" onConfirm={() => confirm(r)} onCancel={cancel}>
										<a href="#" disabled={r.isDefault == 0}>
											删除
										</a>
									</Popconfirm>
								</Menu.Item>
							</Menu>
						}
					>
						<Button type="link">
							更多
							<DownOutlined />
						</Button>
					</Dropdown>
				</span>
			),
			width: 200
		}
	];
	return { defaultColumns };
};
